view
<template>
  <view class="task-box">
    <uv-navbar
      title="我的方案"
      placeholder
      :bg-color="scrollTop > 40 ? '#fff' : 'transparent'"
      auto-back
      left-icon-color="#757575"
      title-style="color: #000000; font-size: 32rpx"
    />
    <view class="task-list">
      <uv-search
        placeholder="请输入搜索内容"
        v-model="queryParams.name"
        bg-color="#fff"
        animation
        margin="20rpx"
        @search="handleSearch"
        @custom="handleSearch"
        @clear="handleSearch"
      />
      <view
        class="task-item"
        v-for="(item, index) in dataList"
        :key="index"
        @click="handleDownload(item)"
      >
        <view style="padding: 20rpx 20rpx 20rpx 50rpx">
          <uv-text
            :text="item.name"
            :lines="1"
            color="#212121"
            size="28rpx"
            line-height="50rpx"
          />
          <uv-text
            :text="item.createTime"
            color="#757575"
            size="24rpx"
            line-height="50rpx"
          />
          <view class="row">
            <uv-icon
              :name="iconMember"
              size="32rpx"
              label-color="#757575"
              space="10rpx"
              :label="item.createBy"
              label-size="24rpx"
            />
          </view>
        </view>
      </view>
      <uv-load-more v-if="dataList.length != 0" :status="status" class="ss-m-y-30" />
      <uv-empty
        v-if="dataList.length == 0"
        margin-top="20vh"
        :icon="empty"
        text="暂无方案"
      />
    </view>
    <uv-back-top :scroll-top="scrollTop" icon="arrow-up" :top="40" :bottom="40" />
  </view>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { onPullDownRefresh, onReachBottom, onPageScroll } from "@dcloudio/uni-app";
import { webSrc } from "@/common/mothed.js";
import { getProgrammeList } from "@/request/task.js";
import iconMember from "@/static/icon_member.png";
import empty from "@/static/empty.png";

const dataList = ref([]); // 方案列表
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  name: "", // 搜索关键词
});
const total = ref(0); // 总条数
const status = ref("loadmore"); // 加载状态
const scrollTop = ref(0); // 滚动条位置

onMounted(() => {
  getList();
});

onPageScroll((e) => {
  scrollTop.value = Math.floor(e.scrollTop);
});

onPullDownRefresh(() => {
  queryParams.value.pageNum = 1;
  getList();
});

onReachBottom(() => {
  if (dataList.value.length < total.value) {
    queryParams.value.pageNum++;
    getList();
  }
});

// 搜素数据
const handleSearch = () => {
  queryParams.value.pageNum = 1;
  getList();
};

// 获取数据列表
const getList = () => {
  status.value = "loading";
  getProgrammeList(queryParams.value)
    .then((res) => {
      if (res.code == 200) {
        let list = res.data.records;
        dataList.value =
          queryParams.value.pageNum == 1 ? list : dataList.value.concat(list);
        total.value = res.data.total;
      }
    })
    .finally(() => {
      status.value = total.value == dataList.value.length ? "nomore" : "loadmore";
      uni.stopPullDownRefresh();
    });
};

// 下载并打开方案
const handleDownload = (item) => {
  if (item.programmePdfPath) {
    uni.downloadFile({
      url: webSrc(item.programmePdfPath),
      success: (res) => {
        const filePath = res.tempFilePath;
        uni.openDocument({
          filePath: filePath,
          success: (res) => {
            console.log("打开文档成功");
          },
        });
      },
    });
  } else {
    uni.showToast({
      title: "未找到方案文件",
      icon: "none",
    });
  }
};
</script>
<style lang="scss" scoped>
.task-box {
  min-height: 100vh;
  padding: 40rpx;
  box-sizing: border-box;
  background: linear-gradient(180deg, #ffffff 0%, #50bc7a 100%);
  .task-list {
    min-height: calc(100vh - 160rpx - var(--status-bar-height));
    background: linear-gradient(180deg, #ace1b5 0%, #fbfbfb 120rpx, #fbfbfb 100%);
    box-shadow: 0 0 20rpx 2rpx rgba(78, 167, 112, 0.16);
    border-radius: 20rpx;
    box-sizing: border-box;
    overflow: auto;
    .task-item {
      width: auto;
      min-height: 160rpx;
      background: #f6f6f6;
      border-radius: 20rpx;
      justify-content: space-between;
      margin-bottom: 20rpx;
      box-sizing: border-box;
      overflow: hidden;
      position: relative;
      margin: 18rpx;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 20rpx;
        background: #85c889;
      }
      .row {
        margin-top: 12rpx;
        display: flex;
        > view:first-child {
          margin-right: 40rpx;
        }
      }
    }
  }
}
</style>
